<template>
  <a-drawer
    :title="title"
    @close="close"
    width="400px"
    :footer="null"
    :visible="state.visible"
  >
    <div class="pdd-history">
      <a-tabs
        v-model:activeKey="tabActiveKey"
        v-if="menuList && menuList.length"
      >
        <a-tab-pane
          :key="menu.type"
          :tab="menu.typeName"
          v-for="menu in menuList"
        >
          <a-timeline v-if="historyData[menu.type]">
            <a-timeline-item
              :color="item.completeState === 0 ? '#1677ff' : 'grey'"
              v-for="item in historyData[menu.type]"
              :key="item.id"
            >
              <div class="cp pr item">
                <div>
                  <strong class="mb5">{{ item.nodeCodeName }}</strong>
                  <div class="content-wrap">
                    <div v-if="item.id !== -1">
                      处理人:{{ item.handlerName }}
                    </div>
                    <div>
                      {{ item.id === -1 ? '操作时间' : '开始时间' }}:{{
                        item.initiationTimeStr
                      }}
                    </div>
                    <div v-if="item.completeTimeStr && item.id !== -1">
                      结束时间:{{ item.completeTimeStr }}
                    </div>
                    <div v-if="item.id !== -1">耗时：{{ item.duration }}</div>
                  </div>
                </div>
                <div class="df btn-wrap">
                  <div>
                    <a-button
                      size="small"
                      type="primary"
                      @click="
                        $refs.edit.open(
                          {
                            ...item,
                            type: menu.type
                          },
                          true
                        )
                      "
                    >
                      <template #icon><SaveOutlined /></template>
                      编辑
                    </a-button>
                  </div>
                  <div
                    class="ml10"
                    v-if="item.isCurrentHandler && item.completeState === 1"
                  >
                    <a-button
                      size="small"
                      type="primary"
                      @click="complete(menu.type)"
                    >
                      <template #icon><CheckCircleOutlined /></template>
                      完结
                    </a-button>
                  </div>
                  <div
                    class="ml10"
                    v-if="item.isCurrentHandler && item.completeState === 1"
                  >
                    <a-button size="small" type="primary" @click="end(type)">
                      <template #icon><LogoutOutlined /></template>
                      终止
                    </a-button>
                  </div>
                </div>
              </div>
            </a-timeline-item>
          </a-timeline>
        </a-tab-pane>
      </a-tabs>
    </div>
    <edit ref="edit" @complete="getHistoryList(true)" />
  </a-drawer>
</template>

<script>
import Edit from './edit.vue'
import {
  SaveOutlined,
  CheckCircleOutlined,
  LogoutOutlined
} from '@ant-design/icons-vue'
import form from '@/components/cupshe/mixin/form.js'
import {
  work_bench_list_history_post,
  work_bench_node_process_auto_post,
  work_bench_process_end_post,
  work_bench_node_cp_count_post
} from '@/server/modules/12142'
export default {
  name: 'ViewModal',
  components: {
    Edit,
    SaveOutlined,
    CheckCircleOutlined,
    LogoutOutlined
  },
  mixins: [form],
  data() {
    return {
      formItemLayout: {
        labelCol: { span: 7 },
        wrapperCol: { span: 17 }
      },
      title: '历史',
      tabActiveKey: 1,
      cp: '',
      menuList: [],
      list: [],
      historyData: {}
    }
  },
  //   created() {
  //     this.initMap()
  //   },
  methods: {
    afterOpen(cp) {
      this.cp = cp
      this.getHistoryList()
    },
    getHistoryList(refresh) {
      work_bench_node_cp_count_post({ nodeType: 1 }).then(
        async ({ success, data }) => {
          if (success) {
            this.menuList = data
            if (!refresh) {
              this.tabActiveKey = data[0].type
            }
            let obj = {}
            for (let i = 0; i < data.length; i++) {
              const { data: resultData, success: successResult } =
                await work_bench_list_history_post({
                  cps: [this.cp],
                  type: data[i].type
                })
              if (successResult) {
                obj[data[i].type] = resultData
              }
            }
            this.historyData = obj
            // this.getData(cp, da)
            // this.getDetail(data[0].type, this.cp)
          }
        }
      )
    },
    getData(cp) {
      work_bench_list_history_post({ cps: [cp] }).then(({ success, data }) => {
        if (success) {
          this.list = data
        }
      })
    },
    afterClose() {
      this.cp = ''
      this.list = []
    },
    complete(type) {
      work_bench_node_process_auto_post({ cps: [this.cp], type }).then(
        ({ success, retInfo }) => {
          if (success) {
            this.getData(this.cp)
            this.$notification.success({
              message: '完结成功'
            })
          } else {
            this.$notification.error({
              message: retInfo || '完结失败'
            })
          }
        }
      )
    },
    end(type) {
      work_bench_process_end_post({ cp: this.cp, type }).then(
        ({ success, retInfo }) => {
          if (success) {
            this.getData(this.cp)
            this.$notification.success({
              message: '终止成功'
            })
          } else {
            this.$notification.error({
              message: retInfo || '终止失败'
            })
          }
        }
      )
    }
  }
}
</script>
<style lang="scss">
.pdd-history {
  .title {
    font-size: 20px;
    font-weight: bold;
    color: black;
  }
  .history-btn {
    position: absolute;
    top: 15px;
    right: 60px;
  }
  .item {
    width: 300px;
  }
  .select {
    border: solid 1px green;
  }
  .content-wrap {
    background: #fafafa;
    padding: 10px;
    margin-top: 10px;
  }
  .btn-wrap {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
  }
  .item:hover {
    .content-wrap {
      background: #f2fbff;
    }
    .btn-wrap {
      opacity: 1;
    }
  }
}
</style>
